<script setup>
import {Vue3Marquee} from "vue3-marquee";
import 'vue3-marquee/dist/style.css'
import {infoStore} from "@/store";
import {storeToRefs} from "pinia";
import {onMounted, reactive, ref, watch} from "vue";

const store = infoStore();
let {
    playListIndex,
    playListInfo,
    lyricShow,
    musicLyric,
    currentTime,
    duration,
    musicMin,
    musicSec
} = storeToRefs(store);
const {updateDetailShow, updatePlayListIndex, updateLyricShow} = store;
const {playInfo, btnShow, play, changeDuration} = defineProps(['playInfo', 'btnShow', 'play', 'changeDuration',]);

const state = reactive({
    lyric: [],
    musicMin: 0,
    musicSec: 0
});

const back = () => {
    if (lyricShow.value === true) updateLyricShow()
    updateDetailShow();
    // console.log(musicLyric.value.data.lrc.lyric)
}
const goPlay = num => {
    let index = playListIndex.value + num;
    if (index < 0) {
        index = playListInfo.value.length - 1
    } else if (index === playListInfo.value.length) {
        index = 0;
    }
    updatePlayListIndex(index);
}
const lyric = function () {
    let arr;
    if (musicLyric.value.data.lrc.lyric) {
        arr = musicLyric.value.data.lrc.lyric;
        // [00:00.00]
        arr = musicLyric.value.data.lrc.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
            let min = item.slice(1, 3);
            let sec = item.slice(4, 6);
            let mill = item.slice(7, 10);
            let lrc;
            if (mill[2] === ']') {
                mill = item.slice(7, 9);
                lrc = item.slice(10, item.length);
            } else lrc = item.slice(11, item.length);

            let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
            // console.log(time,lrc)
            return {min, sec, mill, lrc, time};
        })
        // console.log(arr)
        arr.forEach((item, i) => {
            if (i === arr.length - 1 || isNaN(arr[i + 1].time)) item.pre = 100000;
            else item.pre = arr[i + 1].time;
        })
        // console.log(arr)
        return arr;
    }
}
const clickRange = function () {

}
onMounted(() => {
    state.lyric = lyric()
    // changeDuration()
})
watch(musicLyric, () => {
    state.lyric = lyric()
})
const lyricArea = ref()
watch(currentTime, (newV) => {
    // console.log(lyricArea)
    let p = document.querySelector("p.active")
    if (p) {
        if (p.offsetTop > 500) {
            lyricArea.value.scrollTop = p.offsetTop - 350;
        }
    }
    if (newV === duration.value) {
        goPlay(1)
    }
    // console.log(p.offsetTop)
})
</script>

<template>
    <!--背景图-->
    <img :src="playInfo.al.picUrl" alt="" class="bgImg"/>
    <!--顶部-->
    <div class="detailTop">
        <div class="detailTopLeft">
            <svg aria-hidden="true" class="icon back" @click="back">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <div class="musicInfo">
                <vue3-marquee class="leftMarquee">{{ playInfo.name }}</vue3-marquee>
                <span v-for="(author,index) in playInfo.ar" :key="author" class="authorName">
                    {{ author.name }}
                    <span v-if="index+1>0 && index+1<Object.keys(playInfo.ar).length">/ </span>
                </span>
                <svg aria-hidden="true" class="icon authorSvg">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
        </div>
        <div class="detailTopRight">
            <svg aria-hidden="true" class="icon share">
                <use xlink:href="#icon-fenxiang1"></use>
            </svg>
        </div>
    </div>
    <!--磁盘部分 -->
    <div v-show="!lyricShow" class="detailContent">
        <img :class="{img_needle_active: !btnShow}" alt=""
             class="img_needle" src="@/assets/img/needle-ab.png"/>
        <img alt="" class="img_disc" src="@/assets/img/disc-plus.png"/>
        <!--以下三元运算符等价于{img_al_active: !btnShow, img_al_pause: btnShow}-->
        <img :class="[btnShow ? 'img_al_pause' : 'img_al_active']" :src="playInfo.al.picUrl"
             alt="" class="img_al" @click="updateLyricShow"/>
    </div>
    <!--歌词-->
    <div v-show="lyricShow" ref="lyricArea" class="musicLyric" @click="updateLyricShow">
        <p v-for="item in state.lyric" :key="item"
           :class="{active: currentTime * 1000 >= item.time && currentTime * 1000 < item.pre}"
           class="lyric">{{ item.lrc }}</p>
    </div>
    <!--底部-->
    <div class="detailFooter">
        <div class="footerTop">
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-aixin"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-xiazai1"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-changpian"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-xiaoxi"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-liebiao-"></use>
            </svg>
        </div>
        <div class="footerContent">
            <div class="leftTime">0{{ parseInt(currentTime / 60) }}:{{ parseInt(currentTime % 60) }}</div>
            <van-progress :percentage="currentTime*100/duration" :show-pivot="false" :stroke-width="6" class="range"/>
            <div class="rightTime">{{ musicMin }}:{{ musicSec }}</div>
        </div>
        <div class="footer">
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-24gl-repeat2"></use>
            </svg>
            <svg aria-hidden="true" class="icon" @click="goPlay(-1)">
                <use xlink:href="#icon-shangyishoushangyige"></use>
            </svg>
            <svg v-if="btnShow" aria-hidden="true" class="icon play" @click="play">
                <use xlink:href="#icon-bofang1"></use>
            </svg>
            <svg v-if="!btnShow" aria-hidden="true" class="icon play" @click="play">
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg aria-hidden="true" class="icon" @click="goPlay(1)">
                <use xlink:href="#icon-xiayigexiayishou"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-zu"></use>
            </svg>
        </div>
    </div>
</template>

<style lang="less" scoped>
@whiteColor: #F5F5F7;
.bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(70px);
}

.detailTop {
    width: 100%;
    height: 1rem;
    display: flex;
    padding: 0.2rem;
    justify-content: space-between;
    align-items: center;

    .detailTopLeft {
        display: flex;
        align-items: center;

        .icon {
            fill: @whiteColor;
        }

        .back {
            transform: rotate(-90deg);
        }

        .musicInfo {

            .leftMarquee {
                color: @whiteColor;
                width: 3rem;
                height: 100%;
                margin-left: 0.4rem;
            }

            .authorName {
                font-size: 10px;
                width: 3rem;
                height: 100%;
                margin-left: 0.4rem;
                color: #999;
            }

            .authorSvg {
                fill: #999;
                height: 14px;
                width: 14px;
            }
        }

    }

    .detailTopRight {
        .share {
            fill: @whiteColor;
        }

    }

}

.detailContent {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .img_needle {
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        top: 0.3rem;
        transform-origin: 0 0;
        transform: rotate(-13deg);
        transition: all 2s;
    }

    .img_needle_active {
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(0deg);
        transition: all 2s;
    }

    .img_disc {
        width: 5rem;
        height: 5rem;
        position: absolute;
        bottom: 2.0rem;
        z-index: -1;
    }

    .img_al {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        position: absolute;
        bottom: 2.84rem;
        animation: rotate_al 24s linear infinite;
    }

    .img_al_active {
        animation-play-state: running;
    }

    .img_al_pause {
        animation-play-state: paused;
    }

    @keyframes rotate_al {
        0% {
            transform: rotateZ(0deg);
        }
        5% {
            transform: rotateZ(0deg);
        }
        100% {
            transform: rotateZ(360deg);
        }
    }

}

.musicLyric {
    width: 100%;
    height: 9.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    overflow: scroll;
    scroll-behavior: smooth;

    .lyric {
        color: #000;
        margin-bottom: 0.3rem;
    }

    .active {
        color: @whiteColor;
        font-size: 0.5rem;
    }
}

.detailFooter {
    width: 100%;
    height: 3rem;
    position: absolute;
    bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .footerTop {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .icon {
            width: 0.6rem;
            height: 0.6rem;
            fill: @whiteColor;
        }

    }

    .footerContent {
        display: flex;
        align-items: center;

        .leftTime {
            margin: 0 0.2rem;
            font-size: 15px;
        }

        .range {
            width: 80%;
            height: 0.06rem;
        }

        .rightTime {
            margin: 0 0.2rem;
            font-size: 15px;
        }
    }

    .footer {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .icon {
            fill: @whiteColor;
        }

        .play {
            width: 1rem;
            height: 1rem;
        }
    }
}
</style>